import React, { Component } from 'react';
import Image from 'react-uwp';
import { connect } from 'react-redux';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import { closeAvatar, uploadAvatar } from '../../store/user';
import { Modal, Button } from 'antd';
class AvatarModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      src: ''
    };
  }
  componentDidMount() {
    const { avatar } = this.props.userInfo;
    this.setState({
      src: avatar
    });
  }
  onChange = e => {
    e.preventDefault();
    let files;
    if (e.dataTransfer) {
      files = e.dataTransfer.files;
    } else if (e.target) {
      files = e.target.files;
    }
    const reader = new FileReader();
    reader.onload = () => {
      this.setState({ src: reader.result });
    };
    reader.readAsDataURL(files[0]);
  };
  avatar = () => {
    return (
      <div className="dfr wh100">
        <div className="origin">
          <div className="dfr" style={{ width: '16rem' }}>
            <label htmlFor="afile" className="uploadBtn aHelper">
              选择图片
            </label>
            <input
              id="afile"
              style={{ height: 0, width: 0 }}
              type="file"
              onChange={this.onChange}
              accept="image/png, image/jpeg, image/gif, image/jpg"
            />
          </div>
          <Cropper
            style={{ height: '16rem', width: '16rem' }}
            aspectRatio={1 / 1}
            preview=".img-preview"
            guides={false}
            src={this.state.src}
            ref={cropper => {
              this.cropper = cropper;
            }}
          />
        </div>
        <div className="preview">
          <p className="f14">预览</p>
          <div className="dfcc" style={{ height: '16rem', width: '16rem' }}>
            <div className="img-preview" style={{ width: 300, height: 300 }} />
          </div>
          {/* <img style={{ width: '100%' }} src={this.state.cropResult} alt="cropped image" /> */}
        </div>
      </div>
    );
  };

  handleOk = () => {
    if (typeof this.cropper.getCroppedCanvas() === 'undefined') {
      return;
    }
    let cropResult = this.cropper.getCroppedCanvas().toDataURL();
    this.setState({
      cropResult
    });
    const { uploadAvatar } = this.props;
    uploadAvatar({ cropResult });
  };
  render() {
    const { visible, closeAvatar, loading } = this.props;
    return (
      <Modal
        className="avatarModal"
        visible={visible}
        title="修改图像"
        onCancel={() => closeAvatar()}
        footer={[
          <Button
            key="submit"
            type="primary"
            loading={loading}
            onClick={this.handleOk}
          >
            确定
          </Button>,
          <Button key="back" onClick={() => closeAvatar()}>
            取消
          </Button>
        ]}
      >
        {this.avatar()}
      </Modal>
    );
  }
}
const mapStateToProps = state => ({
  visible: state.user.avatarModal.visible,
  userInfo: state.user.userInfo,
  loading: state.user.avatarModal.loading
});
const mapDispatchToProps = {
  closeAvatar,
  uploadAvatar
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AvatarModal);
